<!-- 关系图 -->
<template>
  <a-row class="relationChart">
    <a-col :span="17">
      <div id="network_id"></div>
    </a-col>
    <a-col :span="7">
      <div class="right-info">
        <a-card title="数据管理">
          <params-manage />
        </a-card>
        <a-card title="节点配置" v-if="showClickEdit">
          <a-form :model="configForm" disabled auto-label-width>
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item field="nodeName" label="节点名称:" class="disable-text">
                  <a-input v-model="configForm.nodeName" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item field="healthSize" label="健康度:" class="form-item disable-text">
                  <a-input placeholder="健康度配置">
                    <template #append
                      ><icon-settings
                        @click="showConfigVisible('HEALTH')"
                        style="cursor: pointer; font-size: 18px"
                      ></icon-settings
                    ></template>
                  </a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <!--<a-row :gutter="24">
            <a-col :span="20">
              <a-form-item
                field="functionSize"
                label="功能指标项:"
                label-col-flex="100px"
                class="form-item disable-text"
              >
                <a-input v-model="configForm.functionSize">
                  <template #append
                    ><icon-settings
                      @click="showConfigVisible('FUNCTIONAL')"
                      style="cursor: pointer; font-size: 18px"
                    ></icon-settings
                  ></template>
                </a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="20">
              <a-form-item
                field="performanceSize"
                label="性能指标项:"
                label-col-flex="100px"
                class="form-item disable-text"
              >
                <a-input v-model="configForm.performanceSize">
                  <template #append
                    ><icon-settings
                      @click="showConfigVisible('PERFORMANCE')"
                      style="cursor: pointer; font-size: 18px"
                    ></icon-settings
                  ></template>
                </a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="20">
              <a-form-item
                field="associationSize"
                label="关联参数:"
                label-col-flex="100px"
                class="form-item disable-text"
              >
                <a-input v-model="configForm.associationSize">
                  <template #append
                    ><icon-settings
                      @click="showConfigVisible('PARAM')"
                      style="cursor: pointer; font-size: 18px"
                    ></icon-settings
                  ></template>
                </a-input>
              </a-form-item>
            </a-col>
          </a-row>-->
          </a-form>
        </a-card>
        <!--<div class="config-list" v-if="configVisible">
          <span></span><span></span><span></span><span></span>
          <div class="config-title">
            <span>{{ typeEnum[configTitle] }}</span>
            <icon-close @click="() => (configVisible = false)" />
          </div>
          <a-button
            style="margin: 10px 0 10px 10px; background-color: #3075ac"
            type="primary"
            @click="openAddDialog({}, 3)"
            ><icon-plus />新增</a-button
          >
          <a-table :data="list" :scroll="srcoll" :bordered="false" class="config-table" :pagination="false">
            <template #columns>
              <a-table-column
                title="指标名称"
                ellipsis
                :tooltip="{ position: 'left' }"
                data-index="metricsName"
              ></a-table-column>
              <a-table-column
                title="指标代号"
                :width="110"
                ellipsis
                :tooltip="{ position: 'left' }"
                data-index="metricsCode"
              ></a-table-column>
              <a-table-column title="操作" :width="155" align="center">
                <template #cell="{ record }">
                  <a-button
                    type="text"
                    status="success"
                    style="color: #409eff; padding: 0 5px"
                    @click="openAddDialog(record, 1)"
                    >详情</a-button
                  >
                  <a-button
                    type="text"
                    status="success"
                    style="color: #00b3b3; padding: 0 5px"
                    @click="openAddDialog(record, 2)"
                    >编辑</a-button
                  >
                  <a-button type="text" status="warning" style="padding: 0 5px" @click="deleteConfigItem(record)"
                    >删除</a-button
                  >
                </template>
              </a-table-column>
            </template>
          </a-table>
          <a-pagination
            class="fault-pagination"
            :total="total"
            :current="currentPage"
            :pageSize="pageSize"
            :page-size-options="[10]"
            show-total
            @change="handleCurrentChange"
            @page-size-change="handleSizeChange"
          />
        </div>-->
      </div>
    </a-col>
  </a-row>
  <!-- 右键配置 -->
  <ul id="digContextMenu" class="menu" v-show="rightClickShow">
    <li @click="funConfigNode()">
      <span>配置节点</span>
    </li>
    <li @click="funAddNode()">
      <span>添加节点</span>
    </li>
    <li @click="funDelNode()">
      <span>删除节点</span>
    </li>
    <li @click="funRefreshNode()">
      <span>刷新</span>
    </li>
  </ul>
  <Add
    ref="addConfigItem"
    :nodeList="nodeList"
    :title="configTitle"
    :paramsList="paramsList"
    :nodeId="nodeId"
    :performanceList="performanceList"
    :functionList="functionList"
    :funNodesInfoShow="funNodesInfoShow"
    :new-params-list="newParamsList"
  ></Add>
  <!-- 配置节点 -->
  <ConfigFrom ref="configFrom" @hideRightMent="hideRightMent"></ConfigFrom>
  <!-- 添加子节点 -->
  <AddFrom ref="addFrom" @funRefreshNode="funRefreshNode" @hideRightMent="hideRightMent"></AddFrom>
</template>
<script setup>
import Vis from 'vis'
import AddFrom from './addFrom.vue'
import ConfigFrom from './configFrom.vue'
import Add from './add.vue'
import { Modal, Message } from '@arco-design/web-vue'
import { IconPlus, IconClose } from '@arco-design/web-vue/es/icon'
import { ref, reactive, onMounted, defineExpose, defineEmits, onBeforeUnmount } from 'vue'
import { apiHome } from '@/api/healthAssessment'
import ParamsManage from '@/views/healthAssessment/paramsManage.vue'
const emit = defineEmits(['funRefreshNodes', 'funDelNodes', 'funNodesInfo'])
const nodes = ref([]) // 节点数据源
const edges = ref([]) // 连接线走向
const state = reactive({
  // 初始化数据
  nodes: {},
  edges: {},
  nodesArrayCopy: new Map(),
  edgesArrayCopy: []
})
const digData = reactive({
  nodes: null,
  edges: null
})
const clickDiagramId = ref('') // 选中ID
const clickDiagramParId = ref()
const showClickEdit = ref(false) // 是否显示节点信息
const rightClickShow = ref(false) // 是否显示右键配置
const srcoll = {
  y: 280
}
const list = ref([])
let timer = null
const nodeList = ref([])
const nodeId = ref('')
const paramsList = ref([])
const newParamsList = ref([])
const performanceList = ref([])
const functionList = ref([])
const configName = ref('')
const configVisible = ref(false)
const configTitle = ref('')
const addConfigItem = ref(null)
const pageSize = ref(10)
const total = ref(0)
const currentPage = ref(1)
const configForm = reactive({
  healthSize: '',
  performanceSize: [],
  nodeName: '',
  functionSize: '',
  associationSize: ''
})
const getParamDetail = reactive({
  PARAM: apiHome.getParampageList,
  FUNCTIONAL: apiHome.getFunctionalIndicators,
  PERFORMANCE: apiHome.getPerformanceIndicators
})
const typeEnum = reactive({
  PARAM: '关联参数设置',
  HEALTH: '健康度设置',
  FUNCTIONAL: '功能指标设置',
  PERFORMANCE: '性能指标设置'
})
const handleCurrentChange = (val) => {
  currentPage.value = val
  getTableList(configTitle.value)
}
const handleSizeChange = (val) => {
  pageSize.value = val
  getTableList(configTitle.value)
}
const getTableList = (data) => {
  const param =
    data === 'HEALTH'
      ? nodeId.value
      : {
          parentId: nodeId.value,
          page: currentPage.value,
          size: pageSize.value
        }
  getParamDetail[data](param).then((res) => {
    if (+res.code === 200) {
      list.value = res.data.list
      total.value = +res.data.total
    } else {
      Message.error(res.message)
    }
  })
}
const getParamList = () => {
  apiHome.getParampageList({ parentId: nodeId.value }).then((res) => {
    if (+res.code === 200) {
      paramsList.value = res.data.list
      paramsList.value?.forEach((item) => {
        item.label = `(${item.metricsCode})${item.metricsName}`
        item.value = item.id
      })
    } else {
      Message.error(res.message)
    }
  })
}
const getNewParamsList = () => {
  apiHome.getParamsListAPI().then((res) => {
    if (+res.code === 200) {
      newParamsList.value = res.data
    } else {
      Message.error(res.message)
    }
  })
}
const getFunctionalList = () => {
  apiHome.getFunctionalIndicators({ parentId: nodeId.value }).then((res) => {
    if (+res.code === 200) {
      functionList.value = res.data.list
      functionList.value?.forEach((item) => {
        item.label = `(${item.metricsCode})${item.metricsName}`
        item.value = item.id
      })
    } else {
      Message.error(res.message)
    }
  })
}
const getPerformanceList = () => {
  apiHome.getPerformanceIndicators({ parentId: nodeId.value }).then((res) => {
    if (+res.code === 200) {
      performanceList.value = res.data.list
      performanceList.value?.forEach((item) => {
        item.label = `(${item.metricsCode})${item.metricsName}`
        item.value = item.id
      })
    } else {
      Message.error(res.message)
    }
  })
}
const showConfigVisible = (data) => {
  configTitle.value = data
  if (data === 'FUNCTIONAL' || data === 'PERFORMANCE') {
    getTableList(data)
    configVisible.value = true
    getParamList()
  } else if (data === 'HEALTH') {
    // getFunctionalList()
    // getPerformanceList()
    getNewParamsList()
    openAddDialog('', 4, nodeId.value)
    configVisible.value = false
  } else {
    getTableList(data)
    configVisible.value = true
  }
}
const deleteEnum = reactive({
  PARAM: apiHome.deleteAssociationParameter,
  FUNCTIONAL: apiHome.deleteFunctionalIndicators,
  PERFORMANCE: apiHome.deletePerformanceIndicators
})
// 删除列表
const deleteConfigItem = (data) => {
  Modal.confirm({
    title: '提示',
    content: '是否删除当前指标配置？',
    modalClass: 'tipModal',
    onOk: () => {
      deleteEnum[configTitle.value](data.id).then((res) => {
        if (+res.code === 200) {
          Message.success('删除成功')
          funNodesInfoShow(nodeId.value, configTitle.value, 1)
        } else {
          Message.error(res.message)
        }
      })
    }
  })
}
// 关系图
const initDiagram = (nodesArray, edgesArray) => {
  nodesArray.forEach((col) => {
    col.isShow = false
    col.label = col.nodeName
    state.nodesArrayCopy.set(col.id, col)
  })
  nodeList.value = nodesArray
  edgesArray.forEach((el) => {
    state.edgesArrayCopy.push(el.ids)
  })
  nodes.value = nodesArray
  edges.value = edgesArray
  state.nodes = new Vis.DataSet(nodesArray)
  state.edges = new Vis.DataSet(edgesArray)
  const container = reactive(document.getElementById('network_id'))
  digData.nodes = state.nodes
  digData.edges = state.edges
  const options = reactive({
    autoResize: true, // 网络将自动检测其容器的大小调整，并相应地重绘自身
    locale: 'cn', // 语言设置：工具栏显示中文
    locales: {
      // 设置语言
      cn: {
        // 工具栏中文翻译
        edit: '编辑',
        del: '删除当前节点或关系',
        back: '返回',
        addNode: '添加节点',
        addEdge: '添加连线',
        editNode: '编辑节点',
        editEdge: '编辑连线',
        addDescription: '点击空白处可添加节点',
        edgeDescription: '点击某个节点拖拽连线可连接另一个节点',
        editEdgeDescription: '可拖拽连线改变关系',
        createEdgeError: '无法将边连接到集群',
        deleteClusterError: '无法删除集群.',
        editClusterError: "无法编辑群集'"
      }
    },
    nodes: {
      // 设置节点样式
      shape: 'circle',
      widthConstraint: 36,
      size: 10,
      font: {
        // 字体配置
        size: 10
      },
      color: {
        // border: "#2B7CE9",  //节点边框颜色
        background: '#97C2FC', // 节点背景颜色
        highlight: {
          // 节点选中时状态颜色

          border: '#2B7CE9',
          background: '#D2E5FF'
        },
        hover: {
          // 节点鼠标滑过时状态颜色
          border: '#2B7CE9',
          background: '#D2E5FF'
        }
      },
      borderWidth: 0, // 节点边框宽度，单位为px
      borderWidthSelected: 2 // 节点被选中时边框的宽度，单位为px
    },
    edges: {
      // 边线配置
      width: 1,
      length: 100,
      color: {
        color: '#848484',
        highlight: '#848484',
        hover: '#848484',
        inherit: 'from',
        opacity: 1.0
      },
      shadow: true,
      smooth: {
        // 设置两个节点之前的连线的状态
        enabled: true, // 默认是true，设置为false之后，两个节点之前的连线始终为直线，不会出现贝塞尔曲线
        type: 'dynamic', // 'dynamic', 'continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal', 'vertical', 'curvedCW', 'curvedCCW', 'cubicBezier'
        roundness: 0.5 // 接受范围：(0-1.0)
      },
      font: {
        size: 10
      },
      arrows: { to: true } // 箭头指向to
    },
    layout: {
      randomSeed: 2,
      hierarchical: false
      // improvedLayout: false,//解决节点多，展示节点之间的关系
    },
    physics: {
      // 计算节点之前斥力，进行自动排列的属性
      enabled: true, // 默认是true，设置为false后，节点将不会自动改变，拖动谁谁动。不影响其他的节点
      barnesHut: {
        gravitationalConstant: -3000,
        centralGravity: 0.3,
        springLength: 120,
        springConstant: 0.04,
        damping: 0.09,
        avoidOverlap: 0
      }
    },
    // 用于所有用户与网络的交互。处理鼠标和触摸事件以及导航按钮和弹出窗口
    interaction: {
      dragNodes: true, // 是否能拖动节点
      dragView: true, // 是否能拖动画布
      hover: true, // 鼠标移过后加粗该节点和连接线
      multiselect: true, // 按 ctrl 多选
      selectable: true, // 是否可以点击选择
      selectConnectedEdges: true, // 选择节点后是否显示连接线
      hoverConnectedEdges: true, // 鼠标滑动节点后是否显示连接线
      zoomView: true // 是否能缩放画布
    },
    // 操作模块:包括 添加、删除、获取选中点、设置选中点、拖拽系列、点击等等
    manipulation: {
      enabled: true, // 该属性表示可以编辑，出现编辑操作按钮
      addNode: true,
      addEdge: true,
      // editNode: undefined,
      editEdge: true,
      deleteNode: true,
      deleteEdge: true
    }
  })
  const network = new Vis.Network(container, digData, options)
  // 点击事件
  network.on('click', (params) => {
    const pointer = params.pointer.DOM
    const nodeId = network.getNodeAt(pointer)
    if (nodeId) {
      timer && clearTimeout(timer)
      timer = setTimeout(() => {
        if (params.nodes.length) {
          clickDiagramId.value = ref(params.nodes[0])
          clickDiagramParId.value = ref(params.edges)
          emit('funNodesInfo', clickDiagramId.value)
          // changeNodeId(clickDiagramId.value)
          hideRightMent()
        }
      }, 300)
    } else {
      hideRightMent()
    }
  })
  // 双击事件
  network.on('doubleClick', function (params) {
    clearTimeout(timer)
    if (params.nodes.length > 0) {
      clickDiagramId.value = params.nodes[0]
      clickDiagramParId.value = params.edges
      const item = state.nodesArrayCopy.get(clickDiagramId.value)
      if (item && item.subIds && item.subIds.length > 0) {
        funNodeDoubleClick(item)
      } else {
        Message.warning('当前为子节点')
      }
    }
  })
  // 点击鼠标右键事件
  network.on('oncontext', (params) => {
    const pointer = params.pointer.DOM
    const nodeId = network.getNodeAt(pointer)
    if (nodeId) {
      clickDiagramId.value = nodeId
      clickDiagramParId.value = params.edges
      const p = network.getPositions(nodeId)
      const domPosi = network.canvasToDOM({ x: p[nodeId].x, y: p[nodeId].y })
      setRightMenu(domPosi.x + 35, domPosi.y)
    } else {
      // 右键没点到节点，可以隐藏菜单等处理
      hideRightMent()
    }
  })
  // 鼠标拖动开始事件
  network.on('dragStart', () => {
    hideRightMent()
  })
  // 鼠标控制节点拖动中事件
  network.on('controlNodeDragging', () => {
    hideRightMent()
  })
  // 鼠标缩放事件
  network.on('zoom', () => {
    hideRightMent()
  })
}
// 设置右键配置位置
const setRightMenu = (x, y) => {
  rightClickShow.value = true
  const contextMenu = document.getElementById('digContextMenu')
  contextMenu.style = `left: ${x}px; top: ${y}px;`
}
// 隐藏右键配置
const hideRightMent = () => {
  rightClickShow.value = false
}
// 节点信息 显示
const funNodesInfoShow = (data, val, type) => {
  apiHome.getNodeInfo(data).then((res) => {
    if (+res.code === 200) {
      // nodeId.value = res.data.nodeId
      nodeId.value = res.data.id
      configForm.nodeName = res.data.nodeName
      configForm.functionSize = `共${res.data.functionSize || 0}项配置`
      configForm.healthSize = `共${res.data.healthSize || 0}项配置`
      configForm.associationSize = `共${res.data.associationSize || 0}项配置`
      configForm.performanceSize = `共${res.data.performanceSize || 0}项配置`
      configName.value = res.data.nodeName
      showClickEdit.value = true
      if (val && val !== 'HEALTH' && type !== 0) {
        configVisible.value = true
        getTableList(val)
      } else {
        configVisible.value = false
      }
    }
  })
}
const openAddDialog = (data, type) => {
  addConfigItem.value.openAddDialog(data?.id, type, nodeId.value)
}
// 双击
const funNodeDoubleClick = (data) => {
  if (
    state.nodesArrayCopy.get(data.subIds[0]) &&
    state.edgesArrayCopy.includes(clickDiagramId.value + ':' + data.subIds[0])
  ) {
    funNodeHide(data.subIds)
  } else {
    funRefreshNode()
  }
}
// 隐藏子节点
const funNodeHide = (list) => {
  list.forEach((el) => {
    const objData = state.nodesArrayCopy.get(el)
    if (objData) {
      if (objData.subIds.length > 0) {
        funNodeHide(objData.subIds)
      }
      const item = state.nodesArrayCopy.get(el)
      state.nodesArrayCopy.delete(el)
      state.nodes.remove(item)
    }
  })
}
// 右键 配置节点
const configFrom = ref(null)
const funConfigNode = () => {
  configFrom.value.funShowModal(nodes.value[0].id, clickDiagramId)
}
// 右键 添加子节点
const addFrom = ref(null)
const funAddNode = () => {
  addFrom.value.funShowModal(clickDiagramId.value)
}
// 右键 刷新
const funRefreshNode = () => {
  emit('funRefreshNodes', clickDiagramId.value, 2)
}
// 更新图表
const funUpdateNode = (res) => {
  if (res.nodesArray.length > 0) {
    res.nodesArray.forEach((el) => {
      el.label = el.nodeName
      if (!state.nodesArrayCopy.get(el.id)) {
        el.isShow = false
        state.nodesArrayCopy.set(el.id, el)
        state.nodes.add(el)
      } else {
        const oldItem = state.nodesArrayCopy.get(el.id)
        state.nodesArrayCopy.delete(el.id)
        state.nodesArrayCopy.set(el.id, el)
        state.nodes.remove(oldItem)
        state.nodes.add(el)
        // state.nodes.update(el);
      }
    })
  }
  if (res.edgesArray.length > 0) {
    res.edgesArray.forEach((col) => {
      if (!state.edgesArrayCopy.includes(col.ids)) {
        state.edgesArrayCopy.push(col.ids)
        state.edges.add(col)
      }
    })
  }
  hideRightMent()
}
// 右键 删除
const funDelNode = () => {
  Modal.confirm({
    title: '提示',
    content: '是否删除当前节点？',
    modalClass: 'tipModal',
    onOk: () => {
      emit('funDelNodes', clickDiagramId.value)
    }
  })
}
// 删除 更新
const funDelUpdateNode = (res) => {
  if (res.code === 200) {
    if (state.nodesArrayCopy.get(clickDiagramId.value)) {
      const item = state.nodesArrayCopy.get(clickDiagramId.value)
      state.nodesArrayCopy.delete(clickDiagramId.value)
      state.nodes.remove(item)
    }
    Message.success('节点删除成功!')
  } else {
    Message.error(res.message)
  }
  hideRightMent()
}
// 拦截右侧菜单点击事件
const forbidMenu = () => {
  document.oncontextmenu = () => {
    return false
  }
}
defineExpose({
  initDiagram,
  funUpdateNode,
  funDelUpdateNode,
  funNodesInfoShow
})
onMounted(() => {
  forbidMenu()
})
onBeforeUnmount(() => {
  document.oncontextmenu = () => {
    return true
  }
})
</script>
<style lang="less" scoped>
.relationChart {
  height: 100%;
  .arco-col,
  #network_id {
    height: 100%;
  }
  .right-info {
    margin-top: 50px;
    width: 100%;
    color: #333;
    height: calc(100% - 80px);
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    .right-info-title {
      margin-top: 20px;
      height: 32px;
      line-height: 22px;
      text-align: left;
      padding-left: 12px;
      border-left: 2px solid rgb(19, 124, 149);
      h5 {
        border-bottom: 1px solid rgb(19, 124, 149);
        margin: 0;
        padding: 0 0 5px 0;
      }
    }
    .right-info-conter {
      padding-left: 20px;
    }
    .right-info-btn {
      margin-top: 45px;
      text-align: center;
    }
    .box-params-manage-table {
      .table-header {
        text-align: right;
        margin-bottom: 16px;
      }
      .table-footer {
        display: flex;
        justify-content: end;
      }
    }
  }
}
.menu {
  width: 100px;
  border: 1px solid #186281;
  position: absolute;
  -webkit-box-shadow: 2px 2px 8px 1px rgb(0 0 0 / 20%);
  box-shadow: 2px 2px 8px 1px rgb(0 0 0 / 20%);
  background-color: #174058;
  border-radius: 5px 5px 5px 5px;
  padding-left: 0;
  li span:hover {
    background: #3696be;
  }
  li,
  span {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    width: 100%;
    padding: 5px 0;
    text-align: center;
    cursor: pointer;
  }
  li:first-of-type {
    border-radius: 5px 5px 0 0;
  }
}
.form-item {
  position: relative;
  .dot {
    position: absolute;
    right: 5px;
    bottom: -3px;
    width: 10px;
    height: 10px;
    background-color: rgb(42, 106, 251);
    border-radius: 50%;
    cursor: pointer;
  }
}

.config-list {
  border: 1px solid rgb(47, 210, 225);
  margin-top: 20px;
  position: relative;
  > span:nth-child(1) {
    position: absolute;
    left: -3px;
    top: -3px;
    padding: 10px;
    border-style: solid;
    border-color: rgb(70, 225, 235);
    border-width: 4px 0 0 4px;
  }
  > span:nth-child(2) {
    position: absolute;
    right: -3px;
    top: -3px;
    padding: 10px;
    border-style: solid;
    border-color: rgb(70, 225, 235);
    border-width: 4px 4px 0 0;
  }
  > span:nth-child(3) {
    position: absolute;
    right: -3px;
    bottom: -3px;
    padding: 10px;
    border-style: solid;
    border-color: rgb(70, 225, 235);
    border-width: 0 4px 4px 0;
  }
  > span:nth-child(4) {
    position: absolute;
    left: -3px;
    bottom: -3px;
    padding: 10px;
    border-style: solid;
    border-color: rgb(70, 225, 235);
    border-width: 0 0 4px 4px;
  }
  .config-title {
    width: 96%;
    margin-left: 2%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    box-sizing: border-box;
    border-bottom: 1px solid rgb(70, 225, 235);
  }
  .config-table {
    min-height: 160px;
  }
  .fault-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 5px 20px;
  }
}

.disable-text {
  :deep(.arco-input-wrapper .arco-input[disabled]) {
    --color-text-4: #626c7a;
  }
}
</style>
